<template>
  <slash-panel>
    <slash-panel-header title="" />
    <slash-panel-body>
      <n-space vertical size="large">
        <n-layout has-sider>
          <n-layout-sider
            collapse-mode="width"
            :collapsed-width="0"
            :width="320"
            show-trigger="arrow-circle"
            content-style="padding: 0px;"
            bordered
          >
            <p>
              <SysResourceGroupTree @select="onSelect" />
            </p>
          </n-layout-sider>
          <n-layout-content content-style="padding: 0px;">
            <div class="ml-4">
              <SysTbDictList ref="listRef" :queryFormValue="queryForm" class="ml-4" />
            </div>
          </n-layout-content>
        </n-layout>
      </n-space>
    </slash-panel-body>
  </slash-panel>
</template>

<script lang="ts">
import { SlashPanel, SlashPanelBody, SlashPanelHeader } from "@/components/Panel";
import SysTbDictList from "./SysTbDictList.vue";
import SysResourceGroupTree from "../SysTbDictGroup/SysResourceGroupTree.vue";
import { ref } from "vue";

export default {
  name: "SysTbDictEntry",
  components: { SysTbDictList, SlashPanelBody, SlashPanelHeader, SlashPanel, SysResourceGroupTree },
  setup() {
    const queryForm = ref<any>({});
    const listRef = ref<any>(null);
    const onSelect = (option) => {
      queryForm.value.fkDictGroupCode = option.groupCode;
      setTimeout(() => {
        listRef.value.reloadTable();
      }, 50);
    };
    return {
      onSelect,
      listRef,
      queryForm
    };
  }
};
</script>

<style scoped>

</style>
